Webbprestanda-API:er: Mätning av timing för överlägsna användarupplevelser

I dagens digitala landskap är en snabb och responsiv webbplats inte längre en lyx; det är en nödvändighet. Användare förväntar sig sömlösa upplevelser, och även en liten fördröjning kan leda till frustration, övergivna kundvagnar och i slutändan förlorade intäkter. Webbprestanda-API:er ger utvecklare verktygen för att exakt mäta olika aspekter av en webbplats prestanda, vilket gör det möjligt för dem att identifiera flaskhalsar och optimera användarupplevelsen (UX).

Förstå vikten av mätvärden för användarupplevelse

Innan vi dyker in i de tekniska detaljerna för API:erna är det avgörande att förstå varför UX-mätvärden är så viktiga. De erbjuder ett kvantifierbart sätt att bedöma hur användare uppfattar hastigheten och responsiviteten på din webbplats. Dålig UX kan påverka negativt:

• Avvisningsfrekvens: Långsamma laddningstider leder ofta till att användare lämnar din webbplats innan de interagerar med innehållet.
• Konverteringsgrad: En frustrerande användarupplevelse kan avskräcka potentiella kunder från att slutföra transaktioner.
• Sökmotorranking: Sökmotorer som Google prioriterar webbplatser med god prestanda, vilket påverkar din synlighet i sökresultaten. Core Web Vitals, som i hög grad förlitar sig på prestanda-API:er, är en rankingfaktor.
• Varumärkesuppfattning: En långsam webbplats kan skapa ett negativt intryck av ditt varumärke, vilket antyder en brist på uppmärksamhet på detaljer och en dålig användarupplevelse.

Viktiga webbprestanda-API:er och mätvärden

Flera webbprestanda-API:er finns tillgängliga, och var och en ger unika insikter i olika aspekter av en webbplats prestanda. Här är några av de viktigaste:

1. Navigation Timing API

Navigation Timing API ger detaljerad tidsinformation relaterad till laddningen av ett dokument. Det låter dig mäta tiden det tar för olika stadier i laddningsprocessen, såsom:

• navigationStart: Tidsstämpeln precis innan webbläsaren börjar hämta dokumentet.
• fetchStart: Tidsstämpeln precis innan webbläsaren börjar hämta dokumentet från nätverket.
• domainLookupStart: Tidsstämpeln precis innan webbläsaren startar DNS-uppslagningen för dokumentets domän.
• domainLookupEnd: Tidsstämpeln precis efter att webbläsaren slutför DNS-uppslagningen.
• connectStart: Tidsstämpeln precis innan webbläsaren börjar upprätta en anslutning till servern.
• connectEnd: Tidsstämpeln precis efter att webbläsaren har slutfört upprättandet av anslutningen till servern.
• requestStart: Tidsstämpeln precis innan webbläsaren skickar HTTP-förfrågan för dokumentet.
• responseStart: Tidsstämpeln precis efter att webbläsaren tar emot den första byten av HTTP-svaret.
• responseEnd: Tidsstämpeln precis efter att webbläsaren tar emot hela HTTP-svaret.
• domLoading: Tidsstämpeln precis innan webbläsaren sätter document.readyState till "loading".
• domInteractive: Tidsstämpeln precis efter att webbläsaren har parsat HTML-dokumentet och DOM är redo.
• domContentLoadedEventStart: Tidsstämpeln precis innan webbläsaren avfyrar DOMContentLoaded-händelsen.
• domContentLoadedEventEnd: Tidsstämpeln precis efter att webbläsaren avfyrar DOMContentLoaded-händelsen.
• domComplete: Tidsstämpeln precis efter att webbläsaren sätter document.readyState till "complete".
• loadEventStart: Tidsstämpeln precis innan webbläsaren avfyrar load-händelsen.
• loadEventEnd: Tidsstämpeln precis efter att webbläsaren avfyrar load-händelsen.

Exempel: Beräkna tiden det tar för DNS-uppslag:

            const navigationTiming = performance.getEntriesByType("navigation")[0];
const dnsLookupTime = navigationTiming.domainLookupEnd - navigationTiming.domainLookupStart;
console.log(`DNS Lookup Time: ${dnsLookupTime} ms`);
            

              
                Copy
              
            
          

2. Resource Timing API

Resource Timing API ger detaljerad tidsinformation för enskilda resurser som laddas av en webbsida, såsom bilder, CSS-filer, JavaScript-filer och typsnitt. Detta API hjälper dig att identifiera vilka resurser som tar längst tid att ladda och optimera deras leverans.

Nyckeltal:

• name: Resursens URL.
• startTime: Tidsstämpeln när webbläsaren börjar hämta resursen.
• responseEnd: Tidsstämpeln när webbläsaren tar emot den sista byten av resursen.
• duration: Den totala tiden det tog att ladda resursen (responseEnd - startTime).
• transferSize: Storleken på resursen som överfördes över nätverket.
• encodedBodySize: Storleken på resursen före komprimering.
• decodedBodySize: Storleken på resursen efter dekomprimering.

Exempel: Identifiera den största bilden på sidan:

            const resourceTiming = performance.getEntriesByType("resource");

let largestImage = null;
let largestImageSize = 0;

resourceTiming.forEach(resource => {
  if (resource.initiatorType === "img" && resource.transferSize > largestImageSize) {
    largestImage = resource.name;
    largestImageSize = resource.transferSize;
  }
});

console.log(`Largest Image: ${largestImage}, Size: ${largestImageSize} bytes`);
            

              
                Copy
              
            
          

3. User Timing API

User Timing API låter dig definiera anpassade prestandamått och mäta tiden det tar för specifika kodblock eller användarinteraktioner. Detta är särskilt användbart för att spåra prestandan hos kritiska JavaScript-funktioner eller komplexa UI-komponenter.

Viktiga metoder:

• performance.mark(markName): Skapar en tidsstämpel med det angivna namnet.
• performance.measure(measureName, startMark, endMark): Skapar en prestandamätning mellan två markeringar.
• performance.getEntriesByType("measure"): Hämtar alla prestandamätningar.

Exempel: Mäta tiden det tar att rendera en komplex React-komponent:

            performance.mark("componentRenderStart");

// Code to render the React component
render(, document.getElementById("root"));

performance.mark("componentRenderEnd");
performance.measure("componentRenderTime", "componentRenderStart", "componentRenderEnd");

const renderTime = performance.getEntriesByName("componentRenderTime")[0].duration;
console.log(`Component Render Time: ${renderTime} ms`);
            

              
                Copy
              
            
          

4. Long Tasks API

Long Tasks API hjälper dig att identifiera uppgifter som blockerar huvudtråden i mer än 50 millisekunder. Dessa långa uppgifter kan orsaka ryckighet i gränssnittet (UI jank) och negativt påverka användarupplevelsen. Genom att identifiera och optimera dessa uppgifter kan du förbättra responsiviteten på din webbplats.

Exempel: Logga långa uppgifter till konsolen:

            const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log("Long Task:", entry);
  });
});

observer.observe({ type: "longtask", buffered: true });
            

              
                Copy
              
            
          

5. Paint Timing API

Paint Timing API exponerar två nyckeltal relaterade till den visuella renderingen av en webbsida:

• First Paint (FP): Tiden då webbläsaren renderar den första pixeln på skärmen.
• First Contentful Paint (FCP): Tiden då webbläsaren renderar det första innehållet (t.ex. bild, text) på skärmen.

Dessa mätvärden är avgörande för att förstå hur snabbt användare uppfattar den initiala visuella återkopplingen från din webbplats.

Exempel: Hämta FCP:

            const paintTiming = performance.getEntriesByType("paint");
const fcpEntry = paintTiming.find(entry => entry.name === "first-contentful-paint");

if (fcpEntry) {
  console.log(`First Contentful Paint: ${fcpEntry.startTime} ms`);
}
            

              
                Copy
              
            
          

6. Largest Contentful Paint (LCP)

Largest Contentful Paint (LCP) är ett Core Web Vital-mått som mäter tiden det tar för det största innehållselementet (t.ex. bild, video, textblock) att bli synligt inom visningsområdet. En bra LCP-poäng indikerar att sidans huvudinnehåll laddas snabbt, vilket ger en bättre användarupplevelse.

Vad man ska optimera för LCP:

• Optimera bilder: Använd lämpliga bildformat (t.ex. WebP), komprimera bilder och använd responsiva bilder.
• Optimera CSS: Minimera och komprimera CSS-filer, och undvik render-blockerande CSS.
• Optimera JavaScript: Skjut upp icke-kritiskt JavaScript och undvik långvariga JavaScript-uppgifter.
• Serverns svarstider: Se till att din server svarar snabbt på förfrågningar.

7. Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS) är ett annat Core Web Vital-mått som mäter den visuella stabiliteten på en webbsida. Det kvantifierar mängden oväntade layoutförskjutningar som inträffar under laddningsprocessen. En låg CLS-poäng indikerar att sidan är visuellt stabil, vilket ger en trevligare användarupplevelse.

Vad orsakar layoutförskjutningar:

• Bilder utan dimensioner: Ange alltid bredd- och höjdattribut för bilder.
• Annonser, inbäddningar och iframes utan reserverat utrymme: Reservera utrymme för dessa element för att förhindra att de orsakar layoutförskjutningar.
• Dynamiskt injicerat innehåll: Var försiktig när du injicerar innehåll dynamiskt, eftersom det kan orsaka oväntade layoutförskjutningar.
• Webbtypsnitt som orsakar FOIT/FOUT: Optimera laddningen av typsnitt för att minimera påverkan av Font-Of-Invisible-Text (FOIT) och Font-Of-Unstyled-Text (FOUT).

8. Interaction to Next Paint (INP)

Interaction to Next Paint (INP) är ett Core Web Vital-mått som mäter en webbsidas responsivitet vid användarinteraktioner. Det utvärderar latensen för alla klick, tryckningar och tangentbordsinteraktioner en användare gör under sitt besök på en sida. INP ersätter First Input Delay (FID) som ett Core Web Vital-mått i mars 2024.

Förbättra INP:

• Optimera JavaScript-exekvering: Dela upp långa uppgifter i mindre, asynkrona delar för att undvika att blockera huvudtråden.
• Skjut upp icke-kritiskt JavaScript: Ladda endast nödvändigt JavaScript för den initiala renderingen och skjut upp resten.
• Använd Web Workers: Flytta beräkningsintensiva uppgifter till Web Workers för att förhindra att de blockerar huvudtråden.
• Optimera händelsehanterare: Se till att händelsehanterare är effektiva och undvik att utföra onödiga operationer.

Praktiska exempel och kodstycken

Här är några praktiska exempel på hur du kan använda webbprestanda-API:er för att mäta och optimera webbplatsens prestanda:

Exempel 1: Mäta sidladdningstid

            window.addEventListener("load", () => {
  const loadTime = performance.timing.loadEventEnd - performance.timing.navigationStart;
  console.log(`Page Load Time: ${loadTime} ms`);
});
            

              
                Copy
              
            
          

Exempel 2: Identifiera långsamma resurser

            const resourceTiming = performance.getEntriesByType("resource");

resourceTiming.forEach(resource => {
  if (resource.duration > 1000) {
    console.warn(`Slow Resource: ${resource.name}, Duration: ${resource.duration} ms`);
  }
});
            

              
                Copy
              
            
          

Exempel 3: Mäta Time to Interactive (TTI) - Approximation

Obs: TTI är ett komplext mätvärde, och detta är en förenklad approximation. Äkta TTI kräver ett mer sofistikerat tillvägagångssätt.

            function getTimeToInteractive() {
  return new Promise(resolve => {
    if (document.readyState === 'complete') {
      resolve(performance.now());
    } else {
      window.addEventListener('load', () => {
        resolve(performance.now());
      });
    }
  });
}

getTimeToInteractive().then(tti => {
  console.log(`Approximate Time to Interactive: ${tti} ms`);
});
            

              
                Copy
              
            
          

Handlingsbara insikter för att optimera användarupplevelsen

När du har samlat in prestandadata med hjälp av webbprestanda-API:er kan du använda följande handlingsbara insikter för att optimera användarupplevelsen på din webbplats:

• Optimera bilder: Komprimera bilder, använd lämpliga bildformat (t.ex. WebP) och använd responsiva bilder för att minska bildernas laddningstider.
• Minimera och komprimera kod: Minimera och komprimera HTML-, CSS- och JavaScript-filer för att minska deras storlek och förbättra laddningstiderna.
• Utnyttja webbläsarcache: Konfigurera din server för att ställa in lämpliga cache-headers för att aktivera webbläsarcache för statiska resurser.
• Använd ett Content Delivery Network (CDN): Distribuera din webbplats innehåll över flera servrar geografiskt för att minska latensen för användare på olika platser. Populära CDN-leverantörer inkluderar Cloudflare, Akamai och Amazon CloudFront.
• Optimera laddning av typsnitt: Använd font-display: swap för att förhindra typsnittsblockering och förbättra den upplevda laddningshastigheten på din webbplats.
• Minska antalet HTTP-förfrågningar: Minimera antalet HTTP-förfrågningar genom att kombinera CSS- och JavaScript-filer, infoga kritisk CSS och använda CSS-sprites.
• Skjut upp icke-kritiska resurser: Skjut upp laddningen av icke-kritiska resurser, som bilder och JavaScript-filer, till efter den initiala sidladdningen.
• Optimera serverns svarstider: Se till att din server svarar snabbt på förfrågningar genom att optimera din server-side-kod och databasfrågor.
• Övervaka prestanda regelbundet: Övervaka kontinuerligt din webbplats prestanda med hjälp av webbprestanda-API:er och andra verktyg för prestandaövervakning för att identifiera och åtgärda eventuella prestandaproblem. Verktyg som Google PageSpeed Insights, WebPageTest och Lighthouse kan ge värdefulla insikter.

Verktyg och bibliotek för prestandaövervakning

Flera verktyg och bibliotek kan hjälpa dig att övervaka och analysera webbplatsens prestanda med hjälp av webbprestanda-API:er:

• Google PageSpeed Insights: Ett gratis verktyg som analyserar din webbplats prestanda och ger rekommendationer för förbättringar.
• WebPageTest: Ett gratis verktyg som låter dig testa din webbplats prestanda från olika platser och webbläsare.
• Lighthouse: Ett open-source, automatiserat verktyg för att förbättra kvaliteten på webbsidor. Det har granskningar för prestanda, tillgänglighet, progressiva webbappar, SEO och mer.
• New Relic: En omfattande plattform för prestandaövervakning som ger realtidsinsikter i webbplatsens prestanda.
• Datadog: En övervaknings- och analysplattform som ger insyn i hela din infrastruktur, inklusive webbplatsens prestanda.
• Sentry: En plattform för felspårning och prestandaövervakning i realtid.
• Web Vitals Chrome Extension: Ett Chrome-tillägg som visar Core Web Vitals-mätvärden i realtid.

Att tänka på för en global publik

När du optimerar webbplatsens prestanda för en global publik är det viktigt att ta hänsyn till följande faktorer:

• Geografisk plats: Använd ett CDN för att distribuera ditt innehåll över flera servrar geografiskt, vilket minskar latensen för användare på olika platser.
• Nätverksförhållanden: Optimera din webbplats för användare med långsamma eller opålitliga nätverksanslutningar genom att använda tekniker som bildkomprimering, kodminimering och webbläsarcache.
• Enhetskapacitet: Optimera din webbplats för olika enheter, inklusive mobiltelefoner, surfplattor och datorer, genom att använda responsiv design och adaptiva laddningstekniker.
• Språk och lokalisering: Se till att din webbplats är lokaliserad för olika språk och regioner, inklusive översättning av innehåll och anpassning av layouter för olika textriktningar.
• Tillgänglighet: Se till att din webbplats är tillgänglig för användare med funktionsnedsättningar genom att följa riktlinjer för tillgänglighet såsom WCAG.

Slutsats

Webbprestanda-API:er erbjuder ovärderliga verktyg för att mäta och optimera en webbplats prestanda. Genom att förstå och använda dessa API:er kan utvecklare identifiera prestandaflaskhalsar, förbättra användarupplevelsen och i slutändan driva affärsframgång. Kom ihåg att prioritera Core Web Vitals (LCP, CLS och INP) som nyckeltal för webbplatsens övergripande hälsa och användarnöjdhet. Genom att kontinuerligt övervaka och optimera din webbplats prestanda kan du säkerställa en snabb, responsiv och engagerande upplevelse för användare över hela världen.